<template>
  <div class="yy-integraed-services-board">
    <Header />
    <el-row class="main" :gutter="16">
      <el-col :span="6">
        <Events class="card-mb"/>
        <Project class="card-mb"/>
        <Meeting class="card-mb"/>
        <Resource />
      </el-col>
      <el-col :span="12">
        <Map />
        <User />
      </el-col>
      <el-col :span="6">
        <Drone class="card-mb"/>
        <Scene class="card-mb"/>
        <AIService />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Header from './components/Header.vue'
import Events from './components/Events.vue';
import Project from './components/Project.vue';
import Meeting from './components/Meeting.vue';
import Resource from './components/Resource.vue';
import Map from './components/Map.vue'
import User from './components/User.vue';
import Drone from './components/Drone.vue';
import Scene from './components/Scene.vue';
import AIService from './components/AIService.vue';
export default {
  components: {
    Header,
    Events,
    Project,
    Meeting,
    Resource,
    Map,
    User,
    Drone,
    Scene,
    AIService
  }
}
</script>
<style lang="scss" scoped>
.yy-integraed-services-board {
  width: 100vw;
  height: 100vh;
  background: rgba(2, 13, 29, 1);
  overflow: hidden;
  .main {
    padding: 0 25px;
    box-sizing: border-box;
  }
  .card-mb {
    margin-bottom: tvh(16);
  }
} 
</style>